<template>
	<xn-form-container
		:title="formData.name + '的假期流水'"
		:width="900"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
		:bodyStylePadding="1"
	>
		<a-card
			style="width: 100%"
			:bordered="false"
			:tab-list="tabListNoTitle"
			:active-tab-key="noTitleKey"
			@tabChange="(key) => onTabChange(key, 'noTitleKey')"
		>
			<p v-if="noTitleKey === 'holiday'">
				<holiday-detail :holidayId="formData.id" :leaveType="1" />
			</p>
			<p v-else-if="noTitleKey === 'leave'">
				<holiday-detail :holidayId="formData.id" :leaveType="2" />
			</p>
		</a-card>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
		</template>
	</xn-form-container>
</template>

<script setup name="sysHolidayAccountForm">
	import { cloneDeep } from 'lodash-es'
	import { required } from '@/utils/formRules'
	import sysHolidayAccountApi from '@/api/biz/sysHolidayAccountApi'
	import holidayDetail from './detail.vue'
	// 抽屉状态
	const visible = ref(false)
	const emit = defineEmits({ successful: null })
	const formRef = ref()
	// 表单数据
	const formData = ref({})
	const submitLoading = ref(false)
	const key = ref('holiday')
	const noTitleKey = ref('holiday')
	const tabListNoTitle = [
		{
			key: 'holiday',
			tab: '年假'
		},
		{
			key: 'leave',
			tab: '调休假'
		}
	]

	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		if (record) {
			let recordData = cloneDeep(record)
			formData.value = Object.assign({}, recordData)
		}
	}
	// 关闭抽屉
	const onClose = () => {
		formData.value = {}
		visible.value = false
		emit('successful')
	}
	const onTabChange = (value, type) => {
		if (type === 'key') {
			key.value = value
		} else if (type === 'noTitleKey') {
			noTitleKey.value = value
		}
	}
	// 默认要校验的
	const formRules = {}
	// 验证并提交数据
	const onSubmit = () => {
		formRef.value.validate().then(() => {
			submitLoading.value = true
			const formDataParam = cloneDeep(formData.value)
			sysHolidayAccountApi
				.sysHolidayAccountSubmitForm(formDataParam, formDataParam.id)
				.then(() => {
					onClose()
					emit('successful')
				})
				.finally(() => {
					submitLoading.value = false
				})
		})
	}
	// 抛出函数
	defineExpose({
		onOpen
	})
</script>
